<template>
  <div class="warning-detail-map">
    <div class="map-container-box" id="map-container"></div>
    <!-- <div class="all-checkbox-list">
      <nanning-screen-checkbox @on-change-checkbox="onChangeCheckbox" @on-change-visible="onChangeVisible" v-model="checkedLabel" :visibleCheckboxList="visibleCheckboxList"></nanning-screen-checkbox>
    </div> -->
    <warning-detail-pop-msg class="warning-detail-dialog" :warning-detail-data="warningDetail"></warning-detail-pop-msg>
    <!-- <case-event-search-pop class="case-event-search-dialog"></case-event-search-pop> -->
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import warningDetailPopMsg from '../../components/warningDetailPopMsg/index.vue'
// import caseEventSearchPop from '../../components/caseEventSearchPop/index.vue'
// @ts-ignore
import WarningDetail from '../../../basic/WarningDetail.js'
import EventBus from '../../../../../utils/eventBus'
@Component({
  name: 'warning-detail-map',
  components: {
    warningDetailPopMsg
    // caseEventSearchPop
  }
})
export default class WarningDetailMap extends Vue {
  private checkedLabel = [1, 2, 3] // 默认选中的值

  private visibleCheckboxList = false

  private warningList: any = []

  private map: any

  private warningDetail = {}

  private onChangeCheckbox(value: any) {
    console.log('多选框选中的值', value)
  }

  private onChangeVisible(value: any) {
    this.visibleCheckboxList = value
  }

  mounted () {
    this.map = new WarningDetail(this)
    this.map.initWarningDetail()
    // @ts-ignore
    EventBus.$on('warningList', (list) => {
      this.warningList = []
      console.log('recv: ', list)
      this.warningList = list
      this.map.initWarningDetail()
    })
    EventBus.$on('chooseWarning', (e: any) => {
      this.map.setActiveMarker(e)
    })
    EventBus.$on('resetMarker', () => {
      this.map.resetMarker()
    })
  }
  beforeDestroy () {
    console.log('移除 EventBus')
    EventBus.$off()
  }

  getWarningList () {
    return this.warningList
  }

  setWarningDetailData (id: any) {
    this.warningList.forEach((item: any) => {
      if (item.id === id) {
        this.warningDetail = item
      }
    })
  }
}
</script>

<style lang="scss" scoped>
.warning-detail-map {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  position: relative;
  .all-checkbox-list {
    position: absolute; // 定位的基准是中间地图的大盒子
    left: calc(25.7% + 6px);
    top: 20px;
    animation: fadeInLeftList 0.7s linear;
  }
  .map-container-box {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    border-radius: 20px;
    overflow: hidden;
  }
}
</style>
